<template>
  <div class="search-form flex">
    <!-- <el-form-item label="店铺名称">
      <el-input clearable v-model="searchObj.keyword" placeholder="店铺名称" @keyup.enter.native="clickQuery"
        style="width:200px"></el-input>
    </el-form-item> -->
    <hz-button type="primary" @click="clickQuery" style="margin: 0 0 18px 15px">刷新</hz-button>
  </div>

  <hz-table ref="tableRef" :tableConfig="tableConfig" @pageChange="getData" :pagination="false">
  </hz-table>

  <div class="dialog-footer my-dialog-foot">
    <hz-button type="primary" @click="clickSubmit">确定</hz-button>
    <hz-button @click="dialog.show = false">取消</hz-button>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";
import { useStore } from "vuex";

const store = useStore();
const { proxy } = getCurrentInstance();
const props = defineProps(['storeIdList', 'dialog']);
const emits = defineEmits(['updateStoreOkFun'])
const tableRef = ref(null);

const searchObj = reactive({
  keyword: '',
})

// 表格数据
const tableConfig = reactive({
  columns: [
    { label: "店铺名称", prop: "storeName", width: 200 },
    { label: "店铺地址", prop: "storeAddress", width: 300 },
    { label: "合作价/元", prop: "storePrice", width: 100 },
    { label: "分类", prop: "categoryName", width: 100 },
  ],
  dataSource: [],
  pageNo: 1,
  pageSize: 10000,
  total: 0,
});

onMounted(() => {
  getData();
})

// 获取数据
function getData() {
  let { pageNo, pageSize } = tableConfig
  let params = { ...searchObj, pageNo, pageSize }
  proxy.$http.get('/jx/jxStoreManage/queryStoreByKeyword', { params, successTip: false }).then(res => {
    if (res.code == 200) {
      tableConfig.dataSource = res.result.stores || [];
      tableConfig.total = res.result.totalCount
      tableConfig.dataSource.forEach(val => {
        val.storePrice = val.storePrice / 100
      })
      handleSelection();
    }
  })
}

// 初始勾选项
function handleSelection() {
  nextTick(() => {
    let list = props.storeIdList
    if (list.length == 1 && list[0] == '*') {
      tableRef.value.table.toggleAllSelection();
    } else {
      tableConfig.dataSource.forEach(val => {
        if (list.includes(val.id)) {
          tableRef.value.table.toggleRowSelection(val);
        }
      })

    }
  })
}

// 点击查询
function clickQuery() {
  tableConfig.pageNo = 1;
  getData();
}

// 点击确定
function clickSubmit() {
  let obj = {
    datas: [],
    ids: [],
    names: [],
    dataSourceLength: tableConfig.dataSource.length
  }
  if (!tableRef.value) {
    return obj;
  }
  let list = tableRef.value.table.getSelectionRows()

  list.forEach(val => {
    obj.ids.push(val.id)
    obj.names.push(val.storeName)
  })
  obj.datas = list;
  emits('updateStoreOkFun', obj)
  props.dialog.show = false;

}


</script>

<style lang="scss" scoped></style>
